<template>
	<div class="m-banner-wrap" :style="`width: ${width}; height: ${height}`" v-if="bannerData.length">
		<div class="m-banner-list flex-r">
			<div class="u-banner-item fade flex-r is-cur" style="width:1200px;" v-for="(item, index) in bannerData" :key="index"
				v-show="index===activeIndex"
				
				@mouseenter="onStop" @mouseleave="onStart">
				<img style="width: 560px;height: 100%;"  @click="onurl(3,index)" :src="item.image" alt="">
				<div class="" style="width: 510px;margin-left: 70px;">
					<div style="height: 50px;"></div>
					<div style="font-size: 28px;">{{item.title}}</div>
					<div style="height: 50px;"></div>
					<div style="color: #888;line-height:26px;">{{item.desc}}</div>
				</div>
			</div>
			
		</div>
		<div class="m-dot-list" v-if="bannerData.length > 1">
			<div class="is-bor" v-for="n of bannerData.length" :key="n" :class="['u-dot-item', {active: (n-1)===activeIndex}]"
				@mouseenter="onEnter(n-1)">
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	const emit = defineEmits([
		'onurl',
	])
	const {
		bannerData,
		interval,
		width,
		height
	} = defineProps({
		bannerData: { // banner数组
			type: Array,
			default: () => {
				return []
			}
		},
		interval: { // 切换间隔ms
			type: Number,
			default: 3000
		},
		width: { // 宽度
			type: String,
			default: '100%'
		},
		height: { // 高度
			type: String,
			default: '600px'
		}
	})
	const onurl =(i:any,type:any)=>{
		emit('onurl',i,type)
	}
	const activeIndex = ref(0)
	const timer = ref(null)
	onMounted(() => {
		setTimeout(() => {
			onStart()
		}, 1000)
		window.onfocus = () => { // 页面激活
			onStart()
		}
		window.onblur = () => { // 页面失焦
			onStop()
		}
	})
	const onStart = () => {
		clearInterval(timer.value)
		if (bannerData.length > 1) {
			timer.value = setInterval(onMove, interval)
		}
	}
	const onStop = () => {
		clearInterval(timer.value)
	}
	const onEnter = (index) => {
		clearInterval(timer.value)
		activeIndex.value = index
		onStart()
	}
	const onMove = () => {
		if (activeIndex.value === bannerData.length - 1) {
			activeIndex.value = 0
		} else {
			activeIndex.value++
		}
	}
</script>

<style lang="scss" scoped>

	.m-banner-wrap {
		width: 100%;
		height: 585px;
		min-width: 1200px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		z-index: 9;

		.m-banner-list {
			height: 100%;

			.u-banner-item {
				// min-width: 1200px;
				height: 100%;
				width: 100%;

				a {
					display: block;
					height: 100%;
				}
			}

			.fade {
				// 切换banner时的过渡效果
				-webkit-animation: fadein 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				animation: fadein 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
			}

			@-webkit-keyframes fadein {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			@keyframes fadein {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}
		}

		.m-dot-list {
			width: 80%;
			left: 20%;
			height: 10px;
			position: absolute;
			bottom: 30px;
			text-align: center;

			.u-dot-item {
				// 圆点样式
				display: inline-block;
				width: 15px;
				height: 15px;
				background: #E3E3E3;
				border-radius: 1px;
				vertical-align: bottom;
				cursor: pointer;
				border-radius: 100%;

				&:not(:last-child) {
					margin-right: 10px;
				}
			}

			.active {
				// 圆点选中样式
				background: $color;
			}
		}
	}
</style>